<template>
    <div class="detail3"></div>
</template>

<style lang="less" scoped>
.detail3 {
    height: 200px;
    width: 100%;
    text-align: center;
}
</style>
<script>
export default {
    name: 'detailChart3',
    props: {
        data: Array
    },
    data() {
        return {
            detailChart3: null
        }
    },
    methods: {
        setChart() {
            let option = {
                title:{
                    text:"汽提塔流量",
                    left:"right",
                    textStyle :{
                        fontSize:15
                    }
                },
                animation: false, //控制不要动画
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    // showContent: false
                },
                dataset: {
                    source: this.data
                },
                xAxis: { type: 'category' },
                yAxis: { gridIndex: 0 },
                grid: {
                    top: '10%'
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    // {
                    //     type: 'line',
                    //     smooth: true,
                    //     seriesLayoutBy: 'row',
                    //     emphasis: { focus: 'series' }
                    // },
                    // {
                    //     type: 'line',
                    //     smooth: true,
                    //     seriesLayoutBy: 'row',
                    //     emphasis: { focus: 'series' }
                    // }
                ]
            };
            if (!this.detailChart3) this.detailChart3 = this.$echarts(this.$el);
            this.detailChart3.clear();
            this.detailChart3.resize()
            this.detailChart3.setOption(option);
        },
    },
    mounted() {
        this.setChart();
        this.intervalId = setInterval(() => {
            this.setChart();
            // this.detailChart3.setOption({dataset: {
            //         source: this.data
            //     },
            // });
        }, 2000);
    },
}
</script>
